<template>
	<view class="i-opnePosition" v-if="show">
		<view class="open_left">
			<view class="image">
				<image src="../../static/images/location_icon.png" mode=""></image>
			</view>
			<view class="titles">
				<text class="ti">开启定位服务</text>
				<text>用于根据所在位置获取附近门店等场景</text>
			</view>
		</view>
		<view class="open_Right">
			<i-buttons border="none" bgColor="#FB652E" color="#fff" @click="handleClick">去开启</i-buttons>
			<image src="../../static/images/close_icon1.png" mode="" @click="show = false"></image>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		defineProps,
		defineEmits,
		ref,
		onMounted,
		watch
	} from 'vue'
	import { getAppQX } from '../../utils/common';

	const show = ref(true)
	const props = defineProps({
		color: {
			type: String,
			default: '#16161F'
		},
		size: {
			type: Number,
			default: 24
		},
		count: {
			type: Number,
			default: 0
		}
	})
	const emit = defineEmits(['change'])

	const handleClick = () => {
		show.value = false
		emit('change')
	}

	onMounted(() => {
		getQX()
	})

	const getQX = () => {
		const appAuthorizeSetting = uni.getAppAuthorizeSetting()
		show.value = appAuthorizeSetting.locationAuthorized !== 'authorized'
	}

	watch(() => props.count, () => {
		getQX()
	}, {
		immediate: true
	})
</script>

<style lang="scss" scoped>
	.i-opnePosition {
		position: fixed;
		width: calc(100% - 48rpx);
		margin-left: 24rpx;
		background-color: rgba(0, 0, 0, 0.9);
		height: 140rpx;
		@include flexRS;
		bottom: 36rpx;
		z-index: 99;
		border-radius: 16rpx;
		// padding: 0 16rpx;

		.open_left {
			@include flexR;
			margin-left: 16rpx;

			.image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 8rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}
			}

			.titles {
				@include flexC;

				text {
					@include dfont(24rpx);
					color: #fff;
				}

				.ti {
					@include titlefont(32rpx);
					margin-bottom: 8rpx;
					color: #fff;
				}
			}
		}

		.open_Right {
			@include flexR;
			margin-right: 16rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-left: 16rpx;
			}
		}
	}
</style>